<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<title></title>
	</head>
	<body>
		<div id="box">
			<el-container>
			  <el-aside width="200px">
				   <el-tree
				        :data="treedata"
				        node-key="id"
				        default-expand-all
						@node-click="handleNodeClick"
				        :expand-on-click-node="false">
				        <span class="custom-tree-node" slot-scope="{ node, data }">
				          <span>
						  <i :class="data.imgicon"></i>
						  {{ node.label }}
						  </span>
				        </span>
				      </el-tree>
				  <!--<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
			  </el-aside>
			  <el-container>
			    <el-header>主页<br />
					<span style="font-size: 12px;">当前登陆用户：{{user.uname}}</span>
					<el-button size="mini" style="float: right;" @click="outUser">退出登陆</el-button>
				</el-header>
			    <el-main><iframe :src="src" frameborder="0" width="100%" height="98%"></iframe></el-main>
			  </el-container>
			</el-container>
		</div>
	</body>
	<style>
		body{
			margin: 0;
		}
		.el-header{
			background-color: #a9b9e6;
		}
		.el-aside{
			border-right: 1px solid #d0d5f0;
			position: absolute;
			top: 60px;
			bottom: 0px;
		}
		.el-main{
			position: absolute;
			top: 60px;
			bottom: 0px;
			right: 0px;
			left: 200px;
		}
	</style>
	<script>
		new Vue({
			el:"#box",
			data:{
				data : [],
				src:"",
				user:{},
				treedata:[{
				        label: '一级 1',
				          children: [{
				            label: '二级 1-1',
				            children: [{
				              label: '三级 1-1-1'
				            }]
				          }]
				        }, {
				          label: '一级 2',
				          children: [{
				            label: '二级 2-1',
				            children: [{
				              label: '三级 2-1-1'
				            }]
				          }, {
				            label: '二级 2-2',
				            children: [{
				              label: '三级 2-2-1'
				            }]
				          }]
				        }, {
				          label: '一级 3',
				          children: [{
				            label: '二级 3-1',
				            children: [{
				              label: '三级 3-1-1'
				            }]
				          }, {
				            label: '二级 3-2',
				            children: [{
				              label: '三级 3-2-1'
				        }]
				    }]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
				      
			},
			methods: {
			    handleNodeClick(data) {
			    	console.log(data.href);
			    	this.src=data.href
			    },
				initTreeData(){
					// let token=window.localStorage.getItem("token")
					axios.get(API+"selectMenu").then(res=> {
							let s=arrayToTree(res.data.data.menuList)
							this.user=res.data.data.user
							console.log(res.data.data.menuList)
							console.log(s)
							this.treedata=s
						}).catch(err => {
						console.log(err)
					});
				},
				outUser(){
					window.localStorage.clear("token")
					window.location.href="login.html"
				}
			},
			mounted(){//挂载完毕之后执行，vue生命周期函数
				this.initTreeData()
			}
		})
	</script>
</html>